<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用弹性盒子仿小米官网</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #f5f5f5;
        }
        .box{
            margin: 0 auto;
            width: 1250px;
            height: 700px;
            
        }
        /* 头部部分 */
        header{
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }
        .header_left{
            font-size: 20px;
        }
        /* 头部右边 */
        .header_right a{
            position: relative;
            margin-right: 18px;
        }
        .header_right a span{
            width: 33px;
            height: 5px;
            border-radius: 3px;
            position: absolute;
            top: 25px;
            right: 2px;
            background-color: skyblue;
            display: inline-block;
            opacity: 0;
        }

        .header_right a:focus{
            color: orange;
        }
        .header_right a:last-child{
            color: orange;
        }
        .header_right a:last-child span{
            opacity: 1;
            background-color: orange;
        }
       
        .header_right a:focus  span{
           opacity: 1;
           background-color: orange;
        }
        .header_right a:focus ~ a{
            color: black;
        }
        .header_right a:focus ~ a>span{
            opacity: 0;
        }




        /* 内容部分 */
        main{
            display: flex;
            height: 790px;
        }
        /* 内容左边 */
        .main_left{
            padding:8px;
            height: 634px;
            cursor: pointer;
        }
       
        .main_left img{
            width: 239px;
            transition: all .6s 0s ease;
        }
        
        
        /* 内容右边 */
        .main_right{
            display: flex;
            flex-wrap: wrap;
            height: 650px; 
            cursor: pointer;
        }
        .main_right .rtext{
            width: 208px;
            height: 285px;
            margin: 8px;
            padding: 10px;
            background-color: white;
            transition: all .6s 0s ease;
            
        }
        /* 悬停动画 */
        .main_right .rtext:hover,.lastTop:hover,.lastBottom:hover,.main_left img:hover{
            transform: translateY(-2px);
            box-shadow: 0px -2px 20px #A9A9A9;
        }
         a{
            text-decoration: none;
            color: black;
            overflow: hidden;
            text-align: center;
            
        }
        .rtext > a{
           
            width: 214px;
            height: 291px;
            
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .main_right .rtext img{
           
            width: 160px;
            
        }
        .main_right .rtext p:first-of-type{
            font-size: 16px;
        }
        .main_right .rtext p:nth-child(3){
            
            flex: 1;
            width: 214px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 13px;
            color: gray;
            
        }
        .main_right .rtext p:last-of-type{
            color: red;
           
            flex: 1;
        }
        .main_right .rtext p:last-of-type >span{
            color: gray;
            text-decoration-line: line-through;
        }

        /* 最后面两位置内容 */
        .rtextLast{    
            width: 228px;
            height: 380px;
            margin: 8px;
        }
        .lastTop{
            margin-bottom: 15px;
        }
        .lastTop ,.lastBottom{
            transition: all .6s 0s ease; 
        } 

        .lastTop a,.lastBottom a
        {
            width: 228px;
            height: 145px;
            background-color: white;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            
        }
        .lastTextTop,.lastTextbottom{
            text-align: left;
            width: 102px;
            height: 106px;
            display: flex;
            flex-direction: column;
        }
        .lastTextTop{
            justify-content: space-around;
        }
        .lastTextbottom{
            justify-content: center;
        }
        .lastTop img,.lastBottom img{  
            width: 100px; 
        }
        .lastText p{
           font-size: 12px;
           width: 80px;
           line-height: 1.5em;
        }
        .lastText span{
            color: red; 
        }
        .lastTextbottom p{
            font-size: 20px;
        }
        .lastTextbottom span{
            color: black ;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <header>
            <div class="header_left">智能穿戴</div>
            <div class="header_right">
                <a href="#">穿戴
                    <span></span>
                </a>
                <a href="#">耳机
                    <span></span>
                </a>
            </div>
        </header>
        <main>
            <div class="main_left">
                <a href="#">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c9550c95ee33a22dc8db677dada00f09.jpg?thumb=1&w=293&h=768&f=webp&q=90"  alt="">
            </a>
            </div>
            <div class="main_right">
                <div class="rtext">
                    <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208111200_c1016839eae2c1f5bb79d5afde498e81.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                    <p>Xiaomi Buds 4 Pro</p>
                    <p>48dB智能动态降噪|骨声纹通话降噪|独立空间音频</p>
                    <p>999元 <span>1099元</span></p>
                </a>
                </div>
                <div class="rtext">
                    <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202204211422_ce41ed00fe7fb79df35101222880121d.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                    <p>Xiaomi Buds 3 Pro</p>
                    <p>40dB自适应降噪 | 空间音频 | HIFi音质</p>
                    <p>499元 <span>699元</span></p>
                </a>
                </div>
                <div class="rtext">
                    <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0b271a074e087848357aa61ae665b214.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                    <p>Xiaomi Buds 3</p>
                    <p>40dB宽频主动降噪 | HiFi高保真音质|超级敏动圈</p>
                    <p>299元 <span>499元</span></p>
                </a>
                </div>
                <div class="rtext">
                    <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205241527_fb27e27e6587254da27de5ba9c889512.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                    <p>Redmi Buds 4</p>
                    <p>35dB智能主动降噪|AI通话降噪|30小时长续航</p>
                    <p>199元 <span>229元</span></p>
                </a>
                </div>
                <div class="rtext">
                    <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11570d5371f16d2d9b19f504e09d01f0.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                    <p>Redmi Buds 3</p>
                    <p>轻巧半入耳|通话降噪|20小时长续航</p>
                    <p>159元 <span>199元</span></p>
                </a>
                </div>
                <div class="rtext">
                    <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202111052007_e8e92e67988ebaff6e075412a54c3c66.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                    <p>小米真无线蓝牙耳机Air2 SE</p>
                    <p>大尺寸动圈单元|20小时持久续航|双麦克风通话降噪</p>
                    <p>99元 <span>169元</span></p>
                </a>
                </div>
                <div class="rtext">
                    <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210191430_3ad0e4809ce06a126dea9755adbb2a1b.png?thumb=1&w=250&h=250&f=webp&q=90" alt="">
                    <p>Xiaomi骨传导耳机</p>
                    <p>小米首款骨传导耳机</p>
                    <p>699元</p>
                </a>
                </div>
                <div class="rtextLast">
                    <div class="lastTop">
                        <a href="#">
                        <div class="lastTextTop">
                            <p>Xiaomi降噪蓝牙耳机 Necklace</p>
                            <span>499元</span>
                        </div>
                        <img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261427_67cd5fddb341f0e0fb0a2295e643b0d8.png?thumb=1&w=125&h=125&f=webp&q=90" alt="">
                    </a>
                    </div>
                    <div class="lastBottom">
                        <a href="#">
                        <div class="lastTextbottom">
                            <p>浏览更多</p>
                            <span>耳机</span>
                        </div>
                        <img src="https://img2.baidu.com/it/u=3835918261,2736245132&fm=253&fmt=auto&app=138&f=JPEG?w=453&h=340" alt="">
                    </a>
                    </div>
                </a>
                </div>
            </div>
        </main>
    </div>
</body>
</html>